<template>
	<view class="Shell" :style="'padding-top: calc(' + wh + 'px + 88rpx);'">
		<!-- 手机状态栏 -->
		<view :style="'height:' + wh + 'px;'" class="topstate"></view>
		<!-- 抖音平台头部 -->
		<view class="topname" :style="'top: ' + wh + 'px;z-index: 1;'" v-if="platForm=='mp-toutiao'">
			<view open-type="navigateBack" hover-class="none">
				<image :src="imgsrc2 + 'header_back.png?v=' + imgVersion" mode="aspectFill"></image>
			</view>
			<view class="t-del" @tap.stop.prevent="clearFn">
				<view style="margin-right: 8rpx;">
					<image :src="imgsrc1 + 'clear_msg.png?v=' + imgVersion" mode="aspectFill"></image>
				</view>
				<text>全部清空</text>
			</view>
		</view>
		<!-- 微信平台头部 -->
		<view class="topname" :style="'top: ' + wh + 'px;z-index: 1;margin-top:'+biasTop+'px;'"
			v-if="platForm=='mp-weixin'">
			<view @click="backFn" class="t-back">
				<image :src="imgsrc2 + 'header_back.png?v=' + imgVersion" mode="aspectFill"></image>
			</view>
			<text class="t-title">系统通知</text>
			<view class="t-del" @tap.stop.prevent="clearFn" style="right: 204rpx;">
				<view>
					<image :src="imgsrc1 + 'clear_msg.png?v=' + imgVersion" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 列表信息 -->
		<view class="items" v-if="listdata.length != 0">
			<view class="i-items" :id="item.target" v-for="(item, index) in listdata" :key="index">
				<!-- 列表项1 -->

				<view class="i-item" v-if="!item.body.first">
					<view class="ii-title">{{ item.date }}</view>
					<navigator class="ii-content" open-type="navigate" :url="item.url" hover-class="none"
						@touchstart.capture="touchStartFn" @touchmove.capture="touchMoveFn"
						@touchend.capture="touchEndFn"
						:style="index == touchIndex ? 'transform: translateX(' + hasmovex + ');' : ''"
						:data-index="index">
						<!-- 标题 -->
						<view class="title">{{ item.title }}</view>
						<!-- 说明 -->
						<text>{{ item.body }}</text>
						<!-- 查看详情 -->
						<view class="details">
							<view>查看详情</view>
							<image :src="imgsrc1 + 'arr_r.png?v=' + imgVersion" mode="aspectFill"></image>
						</view>
						<view class="ss-delete" @tap.stop.prevent="deleteFn" :data-id="item.id">
							<image :src="imgsrc1 + 'del_btn.png?v=' + imgVersion" mode="aspectFill"></image>
						</view>
					</navigator>
				</view>

				<!-- 列表项2 -->

				<view class="i-item" v-if="item.body.first">
					<view class="ii-title">{{ item.date }}</view>
					<navigator class="ii-content" open-type="navigate" :url="item.url" hover-class="none"
						@touchstart.capture="touchStartFn" @touchmove.capture="touchMoveFn"
						@touchend.capture="touchEndFn"
						:style="index == touchIndex ? 'transform: translateX(' + hasmovex + ');' : ''"
						:data-index="index" :data-id="item.id">
						<!-- 标题 -->
						<view class="title"
							style="border-bottom: 1rpx solid #ededed; padding-bottom: 30rpx; margin-bottom: 36rpx">
							{{ item.title }}
						</view>
						<!-- 订单详情 -->
						<view class="order">
							<view class="oitem" v-for="(value, key) in item.body" :key="key">
								<block v-if="key != 'first' && key != 'remark'">
									<text>{{ key }}</text>
									<rich-text :nodes="value.value" class="text"></rich-text>
								</block>
							</view>
						</view>
						<!-- 删除 -->
						<view class="ss-delete" @tap.stop.prevent="deleteFn" :data-id="item.id">
							<image :src="imgsrc1 + 'del_btn.png?v=' + imgVersion" mode="aspectFill"></image>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 无数据 -->
		<view class="nodata" v-if="listdata.length == 0">
			<image :src="imgsrc1 + 'no_notice.png?v=' + imgVersion" mode="aspectFill">
			</image>
			<view>暂无未读通知~</view>
		</view>
		<!-- 删除弹窗 -->
		<view class="pop" :style="'display: ' + (deleteb ? 'block' : 'none') + ';'">
			<view class="p-content">
				<view class="pc-title">{{ clearb ? '确认要清空系统通知吗？' : '确认删除该通知' }}</view>
				<view class="pc-btn">
					<view class="pcb-cancel" @tap.stop.prevent="cancelFn">取消</view>
					<view class="pcb-clear" @tap.stop.prevent="confirmFn" :data-operate="clearb ? 'clear' : 'delete'">
						{{ clearb ? '清空' : '确认' }}
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框提醒 -->
		<view class="pop-warning" :style="'transform:scale(' + (warningb ? '1' : '0') + ');'">
			<view class="text" style="transform: translate(-50%, -50%)">{{ info }}</view>
		</view>
		<private_tip :privateShow="privateb"></private_tip>
	</view>
</template>

<script>
	// pages/member/systemMsg/systemMsg.js
	let app = getApp();
	var timer;
	var _this;
	export default {
		data() {
			return {
				// 高/宽度(px)
				wh: app.globalData.navTop,
				biasTop: 0,
				// 域名
				imgsrc1: `${app.globalData.masterDomain}/templates/member/touch/im/images/`,

				imgsrc2: `${app.globalData.masterDomain}/static/images/`,

				// 接口数据
				listdata: [],

				info: '',
				page: 1,
				pageSize: 10,

				// 布尔变量
				deleteb: false,

				warningb: false,
				hasmoveb: false,
				clearb: false,
				ajaxb: false,
				privateb: false,
				// 移动距离
				startX: 0,

				startY: 0,
				moveX: 0,
				hasmovex: 0,
				touchIndex: -1,
				id: -1,
				imgVersion: '',

				value: {
					value: ''
				},
				key: '',
				// 兼容项
				platForm: ''
			};
		},
		onPageScroll(e) {
			//触顶加载
			if (e.scrollTop == 0 && !this.ajaxb) {
				uni.showLoading({
					title: '加载中'
				});
				_this.ajaxb = true
				// 列表数据
				_this.$ajax.post({
					url: `include/ajax.php?${app.encodeUrl('service=member&action=message')}`,
					data: {
						page: ++this.page,
						pageSize: this.pageSize
					},
				}).then(res => {
					if (res.data.state == 100) {
						if (res.data.info.list.length != 0) {
							for (let i = 0; i < res.data.info.list.length; i++) {
								let url = res.data.info.list[i].url;
								if (url.indexOf('wxMiniprogram://') == -1) {
									res.data.info.list[i].url =
										`/pages/redirect/index?url=${encodeURIComponent(app.addUrlParam(url))}`;
								} else {
									let index = url.indexOf('?/');
									let str = url.slice(index + 2);
									res.data.info.list[i].url = str;
								}
							}
							this.listdata[0].target = 'scroll';
							_this.listdata = [...res.data.info.list.reverse(), ...this.listdata]
							uni.pageScrollTo({
								selector: '#scroll',
								duration: 0,
								offsetTop: -this.wh - 128
							});
						}
					} else {
						this.warnFn(res.data.info);
					}
					uni.hideLoading({
						success: (res) => {
							_this.ajaxb = false
						}
					});
				})
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			_this = this;
			if (app.globalData.wxprivate == -1) {
				app.watchG('wxprivate', function(value) {
					_this.wxprivate=value;
					if (value) { //弹出弹窗
						_this.privateb = true;
					} else {
						_this.onload(options);
					}
				})
			} else {
				if (app.globalData.wxprivate) { //弹出弹窗
					_this.privateb = true;
				} else {
					_this.onload(options);
				}
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			return {
				path: `/pages/${dyConfig.template}/index`
			}
		},
		methods: {
			onload(options) {
				if (Boolean(app.globalData.biasTop_88)) {
					this.biasTop = app.globalData.biasTop_88 //顶部偏差
				} else {
					app.biasTop('.topname', _this)
				}
				_this.page = 1
				uni.showLoading({
					title: '加载中'
				});
				// 更新
				_this.$ajax.post({
					url: `include/ajax.php?${app.encodeUrl('service=member&action=updateMessageState')}`
				})
				// 列表数据
				_this.$ajax.post({
					url: `include/ajax.php?${app.encodeUrl('service=member&action=message')}`,
					data: {
						page: 1,
						pageSize: 10
					}
				}).then(res => {
					if (res.data.state == 100) {
						for (let i = 0; i < res.data.info.list.length; i++) {
							let url = res.data.info.list[i].url;
							if (url.indexOf('wxMiniprogram://') == -1) {
								res.data.info.list[i].url =
									`/pages/redirect/index?url=${encodeURIComponent(app.addUrlParam(url))}`;
							} else {
								let index = url.indexOf('?/');
								let str = url.slice(index + 2);
								res.data.info.list[i].url = str;
							}
						}
						_this.listdata = res.data.info.list.reverse()
						// 滚动到底部
						_this.$nextTick(res => {
							let query = uni.createSelectorQuery();
							query.select('.items').boundingClientRect();
							query.exec((res) => {
								uni.pageScrollTo({
									scrollTop: res[0].height,
									duration: 200
								});
							});
						})
					} else {
						_this.listdata = []
					}
					uni.hideLoading();
				})
				// 平台切换
				this.platForm = app.globalData.platForm;
			},
			backFn() {
				app.backFn('/pages/index/index');
			},
			// 删除单项消息
			deleteFn(e) {
				let id = e.currentTarget.dataset.id;
				_this.deleteb = true
				_this.clearb = false
				_this.id = id
			},

			// 清空消息
			clearFn() {
				if (this.listdata.length == 0) {
					_this.warningb = true
					this.warnFn('暂无系统通知');
					return;
				}
				_this.deleteb = true
				_this.clearb = true
			},

			// 取消清空
			cancelFn() {
				_this.deleteb = false
			},

			// 确认清空
			confirmFn(e) {
				let operate = e.currentTarget.dataset.operate;
				if (operate == 'clear') {
					//清空操作
					_this.$ajax.post({
						url: `include/ajax.php?${app.encodeUrl('service=member&action=clearMessage')}`,
					}).then(res => {
						_this.deleteb = false
						this.warnFn(res.data.info);
						setTimeout(res => {
							app.reloadFn();
						}, 2000)
					})
				} else {
					//删除操作
					_this.$ajax.post({
						url: `include/ajax.php?${app.encodeUrl('service=member&action=delMessage')}`,
						data: {
							id: this.id
						}
					}).then(res => {
						_this.deleteb = false
						_this.touchIndex = -1
						this.warnFn(res.data.info);
						setTimeout(res => {
							app.reloadFn();
						}, 2000)
					})
				}
			},

			warnFn(info) {
				clearTimeout(timer);
				_this.warningb = true
				_this.info = info
				timer = setTimeout(() => {
					_this.warningb = false
				}, 2000);
			},

			touchStartFn(e) {
				let index = e.currentTarget.dataset.index;
				_this.startX = e.touches[0].clientX
				_this.startY = e.touches[0].clientY
				_this.touchIndex = index
			},

			touchMoveFn(e) {
				let distance = e.touches[0].clientX - this.startX; //取正
				let Y = e.touches[0].clientY - this.startY;
				let tanx = Y / distance;
				if (-1 > tanx || tanx > 1) {
					//大于45°度禁止滚动，tan 45° =1 ；
					return;
				}
				if (this.hasmoveb) {
					//已经移动过
					distance = e.touches[0].clientX - this.startX - 64;
				} else {
					distance = e.touches[0].clientX - this.startX;
				}
				if (0 < distance || distance < -64) {
					//禁止右拉
					return;
				}
				_this.moveX = distance
				_this.hasmovex = `${distance}px`
			},

			touchEndFn(e) {
				if (-24 < this.moveX) {
					_this.moveX = 0
					_this.hasmovex = 0
					_this.hasmoveb = false
					_this.touchIndex = -1
				} else {
					_this.hasmovex = '-128rpx'
					_this.hasmoveb = true
				}
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>